<template>
  <div class="container">
    <div class="uni-forms-box">
      <div class="uni-forms-box-form">
        <uni-forms
          ref="form"
          :modelValue="form"
          :rules="rules"
          label-width="100px"
          label-align="left"
        >
          <!-- 内科 -->
          <uni-forms-item label="姓名" name="name">
            <uni-easyinput
              type="text"
              v-model="form.name"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="学号" name="cardType">
            <uni-easyinput
              type="text"
              v-model="form.cardType"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="身份证号" name="cardNo">
            <uni-easyinput
              type="text"
              v-model="form.cardNo"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="联系电话" name="userPhone">
            <uni-easyinput
              type="text"
              v-model="form.userPhone"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="出生日期" name="appointmentDate">
            <!-- <uni-datetime-picker type="date" v-model="form.appointmentDate" /> -->
            <uni-datetime-picker
              type="date"
              :clear-icon="false"
              v-model="single"
              @maskClick="maskClick"
              style="z-index: 1000"
            />
          </uni-forms-item>
          <uni-forms-item label="年龄" name="userPhone">
            <uni-easyinput
              type="text"
              v-model="form.userPhone"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="籍贯" name="userPhone">
            <uni-easyinput
              type="text"
              v-model="form.userPhone"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="学年" name="userPhone">
            <uni-easyinput
              type="text"
              v-model="form.userPhone"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="学制" name="userPhone">
            <uni-easyinput
              type="text"
              v-model="form.userPhone"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="学院" name="userPhone">
            <uni-easyinput
              type="text"
              v-model="form.userPhone"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="联系电话" name="userPhone">
            <uni-easyinput
              type="text"
              v-model="form.userPhone"
              placeholder="请输入"
            />
          </uni-forms-item>
          <uni-forms-item label="住址" name="userPhone">
            <uni-easyinput
              type="text"
              v-model="form.userPhone"
              placeholder="请输入学校内住址"
            />
          </uni-forms-item>
          <uni-forms-item label="管理员" name="admins">
            <uni-combox
              :candidates="admins"
              placeholder="请选择"
              v-model="form.admin"
              labelKey="label"
              valueKey="id"
            ></uni-combox>
          </uni-forms-item>
          <uni-forms-item label="图片" name="userPhone">
            <uni-file-picker
              limit="1"
              title="请选择头像"
              :imageStyles="imageStyles"
              :listStyles="listStyles"
            ></uni-file-picker>
          </uni-forms-item>
        </uni-forms>
      </div>
    </div>
    <div class="submit-bottom">
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      imageStyles: {
        width: 64,
        height: 64,
        border: {
          radius: "10%",
        },
      },
      listStyles: {
        // 是否显示边框
        border: true,
        // 是否显示分隔线
        dividline: true,
        // 线条样式
        borderStyle: {
          width: 1,
          color: "blue",
          style: "dashed",
          radius: 2,
        },
      },
      // 选择管理员
      admins: [
        { label: "张三", id: "1" },
        { label: "李四", id: "2" },
        { label: "王五", id: "3" },
      ],
    };
  },
  computed: {},
  methods: {
    submit() {
      console.log("提交数据", this.form);
    },

    maskClick(e) {
      console.log("maskClick事件:", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}
.uni-forms-box {
  padding: 20px;
  background-color: #fff;
}
.submit-bottom {
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px 0;

  button {
    background-color: #0d7cff;
    color: #fff;
    margin: 0 1.25rem;
    // border: 1px solid red;
  }
}
::v-deep .icon-add {
  width: 25px !important;
}
.uni-forms-box-form {
  margin-bottom: 5rem;
}
::v-deep .uni-calendar__content {
  z-index: 1000;
}
</style>